<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
			账户充值
		</view>
		<view class="show">
			<view class="sone">
				<view class="sonetap">
					<view class="stapone">
						<view class="staponeleft">{{list.projectName}}</view>
						<view class="staponeright" @click="xgbtn">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//xiugai.png"></image>
						</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">用户姓名:{{list.realName}}</view>
						<view class="staptworight">基本账户:{{list.realBalance}} 元</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">用户编号:{{list.id}}</view>
						<view class="staptworight">赠送账户:{{list.dummyBalance}} 元</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">包月期限：<span v-if="list.endTime">{{list.endTime}}</span>
						<span v-else>无</span></view>
						<view class="staptworight" v-show="list.monthlyType=='A1'||list.monthlyType=='A3'||list.monthlyType=='A4'||list.monthlyType=='A6'">剩余：
							<span v-if="list.monthlyType=='A1'||list.monthlyType=='A4'">{{list.num}}小时</span>
							<span v-else-if="list.monthlyType=='A3'||list.monthlyType=='A6'">{{list.num}}次</span>
							<span v-else>0</span>
						</view>
						<view class="staptworight" v-show="list.monthlyType=='A5'||list.monthlyType=='A7'">剩余：
							<span v-if="list.monthlyType=='A5'">{{list.num}}小时</span>
							<span v-else-if="list.monthlyType=='A7'">{{list.num}}次</span>
							<span v-else>0</span>
						</view>
					</view>
				</view>
			</view>
			<view class="stwo">
				<view class="numlist">
					<view :class="numshow==index+1?'num':'num1'" @click="numbtn(index+1,item.coupon)" v-for="(item,index) in showlist" :key="index">
						<view class="zsmap">
							<view class="zsone">{{item.amount}}元</view>
							<view class="zsnei" v-show="item.coupon>0">赠送{{item.coupon}}元</view>
						</view>
						<view class="zeng" v-show="item.coupon>0">赠</view>
					</view>
				</view>
				<view class="btn" @click="chongzhibtn">
					确认
				</view>
				<view class="checkshow">
					<van-checkbox v-model="checked" shape="square" class="reset">点击确认充值即代表同意</van-checkbox>
					<view style="margin-bottom: 5.7upx; color: #007AFF;" @click="czbtn(1)">《充值协议》</view>
				</view>
			</view>
		</view>
		<!-- //充值协议 -->
		<view class="cztap">
			<van-popup v-model="czshow">
				<view class="czone">
					<view class="cznei">
						<view class="czneihand">
							充值协议
						</view>
						<view class="czneione">
							<view class="cztxtone">
								尊敬的用户，为保障您的合法权益，请您在充值前仔细阅读《充值协议》，
								（本协议）以了解充电用户的充值使用规则并避免产生误解。当您点击“充值”按钮完成充值即视为您已阅读理解本协议，并同意按照本协议约定的规则进行充值与消费。
							</view>
							<view class="cztxttwo">
								一、定义
							</view>
							<view class="cztxtone">
								基本账户：您通过本平台向您的账户实际支付与消费的金额。
							</view>
							<view class="cztxtone">
								赠送账户：您通过本平台优惠活动期间向您的账户实际支付金额额外获得的金额。
							</view>
							<view class="cztxttwo">
								二、使用规则
							</view>
							<view class="cztxtone">
								1. 基本账户/赠送账户仅可本用户支付充电费用，不可用于转移、赠送、出借、租赁或分享给其他用户账户进行消费，基本账户/赠送账户永不过期（购买消费的包月权限除外）。
							</view>
							<view class="cztxtone">
								2. 用户充电支付充电费用，将优先使用基本账户余额，基本账户余额用完后开始使用赠送账户余额。
							</view>
							<view class="cztxtone">
								3. 当您不在使用充电服务时，可选择申请退款，您的基本账户余额将在1-2个工作日内原路退回，此时赠送账户余额将清零。
							</view>
							<view class="cztxttwo">
								三、特别说明
							</view>
							<view class="cztxtone">
								在适用法律法规允许范围内，本协议下的最终解释权归充电平台所有。如有疑问或需了解更多活动详情，请拨打客服电话:<a :href="'tel:'+kfphone" style="color: #4B98ED;">{{kfphone}}</a>或联系所在小区运营商电话咨询（电话见消费推送信息下方）。
							</view>
						</view>
					</view>
					<view class="czdel" @click="czbtn(2)">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//delete.png"></image>
					</view>
				</view>
			</van-popup>
		</view>
	
	</view>
</template>

<script>
	export default {
		components: {},
		mounted() {

		},

		data() {
			return {
				numshow: '1', //额度选择
				checked: false, //勾选
				showlist:[],//充值金额及优惠信息
				id:'',//用户ID
				list:{},
				czshow:false,
				kfphone:''
			}
		},
		onLoad(options) {
			this.id=options.id
		},
		onShow() {
			this.show();
			this.amount()
		},
		methods: {
			//确认充值
			chongzhibtn(){
				
				if(!this.checked){
					this.$toast.fail('请勾选协议!!!')
					return
				}
				uni.showLoading({
					title: '请稍候',
					mask: true
				})
				let data={
						type:'2',
						pear:this.numshow,
						toUserid:this.id
					}
				this.$base.request('order/save', 'POST',data)
					.then(res => {
						uni.hideLoading()
						let arr=res.data.data
						 let _this=this
						 function onBridgeReady(){
						    WeixinJSBridge.invoke(
						       'getBrandWCPayRequest', {
						          "appId":arr.appId,     //公众号名称，由商户传入
						          "timeStamp":arr.timeStamp,         //时间戳，自1970年以来的秒数     
						          "nonceStr":arr.nonceStr, //随机串     
						          "package":arr.wpackage,     
						          "signType":arr.signType,         //微信签名方式：     
						          "paySign":arr.paySign //微信签名 
						       },
						       function(res){
						       if(res.err_msg == "get_brand_wcpay_request:ok" ){
								   _this.$toast.success('充值成功')
						       // 使用以上方式判断前端返回,微信团队郑重提示：
						             //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						       } 
						    }); 
						 }
						 if (typeof WeixinJSBridge == "undefined"){
						    if( document.addEventListener ){
						        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
						    }else if (document.attachEvent){
						        document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
						        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
						    }
						 }else{
						    onBridgeReady();
						 }
					})
					.catch(err => {
						
					})
					
								
			},
			pad(num, n) {
			  var len = num.toString().length;
			  while(len < n) {
			    num = "0" + num;
			    len++;
			  }
			  return num;
			},
			//获取用户信息
			show(){
				this.$base.request('user/info'+'/'+this.id, 'GET')
					.then(res => {
						this.list=res.data.data
						this.list.id=this.pad(this.list.id,8)
						this.kfphone=res.data.data.projectPhone
					})
					.catch(err => {
				
					})
			},
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			//充值协议
			czbtn(vul){
				if(vul==1){
					this.czshow=true
				}else if(vul==2){
					this.czshow=false
				}
			},
			//额度选择按钮
			numbtn(val) {
				this.numshow = val
			},
			//余额充值：获取充值金额及优惠信息
			amount(){
				const userId=this.id
				this.$base.request('recharge/amount'+'/'+userId, 'GET')
					.then(res => {
						if(res.data.data){
							this.showlist=res.data.data
						}else{
							this.showlist=[]
						}
						
					})
					.catch(err => {
						
					})
			},
			//跳转修改页面
			xgbtn(){
				uni.navigateTo({
				       url: '/pages/modify_user_information/modify_user_information?id='+this.id+'&realName='+this.list.realName+'&phone='+this.list.phone,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		/deep/.van-popup--center {
			border-radius: 20upx;
		}
		.hand {
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;

			image {
				width: 22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}
		.czone{
			width: 686upx;
			position: relative;
			padding: 0 30upx;
			box-sizing: border-box;
			height: 950upx;
			padding-bottom: 40upx;
			.cznei{
				width: 100%;
				box-sizing: border-box;
				.czneihand{
					font-size: 32upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					text-align: center;
					color: #333333;
					margin: 20upx 0;
				}
				.czneione{
					margin-top: 20upx;
					.cztxtone{
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #333333;
						line-height: 45upx;
					}
					.cztxttwo{
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 700;
						color: #333333;
						margin: 10upx 0;
					}
				}
			}
			.czdel{
				position: absolute;
				top: 5upx;
				right: 35upx;
				image{
					width: 40upx;
					height: 40upx;
				}
			}
		}
		.show {
			width: 100%;
			box-sizing: border-box;

			.sone {
				width: 100%;
				height: 164upx;
				background-color: #4B98ED;
				position: relative;
				margin-bottom: 116upx;

				.sonetap {
					width: 683upx;
					height: 219upx;
					border-radius: 16upx;
					box-shadow: -1upx 5upx 10upx 0upx rgba(22, 22, 22, 0.27);
					position: absolute;
					background-color: #FFFFFF;
					top: 43upx;
					left: 50%;
					margin-left: -341.5upx;

					.stapone {
						width: 100%;
						box-sizing: border-box;
						padding: 26upx 33upx;
						position: relative;

						.staponeleft {
							font-size: 32upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.staponeright {
							width: 101upx;
							height: 50upx;
							border-radius: 25upx 0upx 0upx 25upx;
							text-align: center;
							background-color: #4B98ED;
							position: absolute;
							bottom: 0upx;
							right: 0upx;
							box-sizing: border-box;
							padding-top: 7upx;
							padding-left: 17upx;

							image {
								width: 37upx;
								height: 36upx;
							}
						}
					}
				}

				.staptwo {
					width: 100%;
					box-sizing: border-box;
					padding-left: 27upx;
					padding-bottom: 5upx;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
					display: flex;

					.staptwoleft {
						width: 50%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.staptworight {
						width: 50%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.stwo {
				margin-top: 160upx;
				.numlist {
					width: 100%;
					box-sizing: border-box;
					padding: 0 59upx;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 60upx;
				
					.num {
						width: 300upx;
						height: 94upx;
						background: #4b98ed;
						border-radius: 8px;
						font-size: 30upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						// line-height: 64upx;
						color: #ffffff;
						margin-bottom: 44upx;
						position: relative;
						border: 1upx solid #4b98ed;
						align-items: center;
						display: flex;
						.zeng {
							width: 48upx;
							height: 48upx;
							border-radius: 8upx;
							font-size: 24upx;
							font-family: PingFang SC Regular, PingFang SC Regular-Regular;
							font-weight: 400;
							text-align: center;
							color: #ffffff;
							line-height: 48upx;
							position: absolute;
							background-color: #F078CE;
							top: -22upx;
							right: 14upx;
						}
						.zsmap{
							width: 100%;
							text-align: center;
							.zsone{
								width: 100%;
								text-align: center;
							}
							.zsnei{
								font-size: 22upx;
								font-family: PingFang SC Medium, PingFang SC Medium-Medium;
								font-weight: 500;
								text-align: center;
							}
						}
						
					}
				
					.num1 {
						width: 300upx;
						height: 94upx;
						background: #FFFFFF;
						border-radius: 8px;
						font-size: 30upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						// line-height: 64upx;
						color: #333333;
						margin-bottom: 44upx;
						border: 1upx solid #dcdcdc;
						position: relative;
						align-items: center;
						display: flex;
						.zeng {
							width: 48upx;
							height: 48upx;
							border-radius: 8upx;
							font-size: 24upx;
							font-family: PingFang SC Regular, PingFang SC Regular-Regular;
							font-weight: 400;
							text-align: center;
							color: #ffffff;
							line-height: 48upx;
							position: absolute;
							background-color: #F078CE;
							top: -22upx;
							right: 14upx;
						}
						.zsmap{
							width: 100%;
							text-align: center;
							.zsone{
								width: 100%;
								text-align: center;
							}
							.zsnei{
								font-size: 20upx;
								font-family: PingFang SC Medium, PingFang SC Medium-Medium;
								font-weight: 500;
								text-align: center;
								color: #999999;
							}
						}
					}
				}

				.ktitle {
					font-size: 24upx;
					font-family: PingFang SC Regular, PingFang SC Regular-Regular;
					font-weight: 400;
					color: #4bed79;
					margin-left: 62upx;
				}

				.btn {
					width: 636upx;
					height: 88upx;
					border-radius: 8upx;
					margin: 35upx auto;
					font-size: 32upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					line-height: 88upx;
					background-color: #4B98ED;
					color: #ffffff;

				}

				.checkshow {
					width: 100%;
					padding-left: 51upx;
					margin-top: 63upx;
					display: flex;
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #666666;
					align-items: center;
					/deep/.van-checkbox__label {
						font-size: 24upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #666666;
					}

					/deep/ .van-checkbox__icon {
						border: 1upx solid #191a1a;
						border-radius: 4upx;

					}

				}
			}
		}

	}
</style>
